<template>
  <u-popup v-model="show" height="409rpx" mode="bottom">
    <view class="share">
      <view class="title">
        <text>分享到</text>
      </view>
      <view class="type">
        <block v-for="(item, index) in list" :key="index">
          <view class="item" @click="onShare(item, index)">
            <image :src="item.icon"></image>
            <view class="text">{{ item.name }}</view>
          </view>
        </block>
      </view>
      <view class="close">
        <u-button type="primary" hover-class="none" :custom-style="customStyle" @click="onClose">
          <text>取消</text>
        </u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    name: 'ShareClass',
    props: {
      //分享列表
      list: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        show: false, //是否要展示
        customStyle: {
          width: '690rpx',
          height: '91rpx',
          background: '#1D93EB',
          borderRadius: '10rpx',
        }, //按钮样式
      }
    },

    methods: {
      //分享那一点方式
      onShare(item, index) {
        this.$emit('share', item, index)
      },
      //打开分享组件
      onShow() {
        this.show = true
      },
      //取消后关闭分享组件
      onClose() {
        this.show = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .share {
    .title {
      display: block;
      text-align: center;
      padding: 14rpx 0 44rpx 0;
      text {
        width: 70rpx;
        height: 23rpx;
        font-size: 24rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #828282;
      }
    }
    .type {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 95rpx;
      padding: 0 76rpx 0 89rpx;
      .item {
        width: 33.33%;
        image {
          width: 82rpx;
          height: 82rpx;
        }
        .text {
          font-size: 24rpx;
          font-family: PingFang;
          font-weight: bold;
          color: #828282;
          padding-top: 25rpx;
        }
      }
    }
    .close {
      padding-bottom: 27rpx;
    }
  }
</style>
